<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <link rel="stylesheet" type="text/css" href="/static/css/page/index.css">
    <link rel="stylesheet" type="text/css" href="/static/css/message.css"/>
</head>
<body>
<div id="app">
    <div class="head-box">
        <form action="" class="query-box" method="get">
            <label>
                <input autocomplete="off" class="input account" name="account" placeholder="请输入账号" type="text"/>
            </label>
            <input class="button add" type="submit" value="查询">
        </form>
        <div class="button-box">
            <a class="button add" href="#">添加学生</a>
        </div>
    </div>

    <div class="body-box">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>账号</th>
                <th>手机</th>
                <th>更新时间</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>账号</td>
                <td>手机</td>
                <td>更新时间</td>
                <td>创建时间</td>
                <td>
                    <a class="button look" href="#">查看</a>
                    <a class="button edit" href="#">编辑</a>
                    <a class="button delete" href="#">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="bottom-box">
        <a class="button first" href="#">最前页</a>
        <a class="button back" href="#">前一页</a>
        <span class="label">
            <span class="page"></span>
            <span>/</span>
            <span class="count"></span>
        </span>
        <a class="button next" href="#">后一页</a>
        <a class="button last" href="#">最后页</a>
    </div>
</div>

<div hidden id="popups-box">
    <div class="popups-window">
        <a class="close" href="#">X</a>
        <span class="title"></span>
        <div class="main"><h2 style="margin-left: 20px; margin-right: 20px;">数据加载中...</h2></div>
    </div>
</div>

<script src="/static/js/jquery-3.6.1.js" type="text/javascript"></script>
<script src="/static/js/message.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function () {
        // 页面数据变量
        let query = {
            account: ''
        };
        let page = {
            count: 0,
            limit: 20,
            page: 1
        };

        // 获取当前用户角色
        let nowUserRole = JSON.parse(window.sessionStorage.getItem('role'));

        // 获取组件
        let appTableBodyEle = $('#app > .body-box > table > tbody');

        // 页面初始执行
        loadTableListData();

        // 加载列表数据
        function loadTableListData() {
            // 获取数据
            $.ajax({
                url: '/api/user/student-list',
                type: "GET",
                data: {
                    limit: page.limit,
                    page: page.page,
                    userRoleId: 6,
                    account: query.account
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        // 获取数据总量
                        page.count = res.count;

                        // 渲染列表
                        appTableBodyEle.html('');
                        if (res.data)
                            res.data.forEach((item, index) => {
                                // 构建元素组件
                                let itemEle = $(`<tr>
                                    <td>${page.limit * (page.page - 1) + index + 1}</td>
                                    <td>${item.userInfo.name}</td>
                                    <td>${item.account}</td>
                                    <td>${item.userInfo.phone}</td>
                                    <td>${item.updateTime}</td>
                                    <td>${item.createTime}</td>
                                    <td>
                                        <a class="button look" href="#" data-id="${item.id}">查看</a>
                                        <a class="button edit" href="#" data-id="${item.id}">编辑</a>
                                        <a class="button delete" href="#" data-id="${item.id}">删除</a>
                                    </td>
                                </tr>`);

                                // 添加查看按钮事件
                                itemEle.find('.button.look').click(lookButtonClick);

                                // 添加编辑按钮事件
                                itemEle.find('.button.edit').click(editButtonClick);

                                // 添加删除按钮事件
                                itemEle.find('.button.delete').click(deleteButtonClick);

                                // 插入组件
                                appTableBodyEle.append(itemEle);
                            });

                        // 设置分页组件显示信息
                        $('#app > .bottom-box > .label > .page').text(page.page);
                        $('#app > .bottom-box > .label > .count').text(Math.ceil(page.count / page.limit));
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 弹出窗口打开方法
        function openPopupsWindow(title) {
            let popupsBoxEle = $('#popups-box');
            $('#popups-box > .popups-window > .title').text(title);
            $('#popups-box > .popups-window > .close').click(function (e) {
                e.preventDefault();
                popupsBoxEle.hide(300, 'swing', function () {
                    window.location.reload();
                });
            });
            popupsBoxEle.show(300, 'swing');
            return $('#popups-box > .popups-window > .main');
        }

        // 搜索事件
        $('#app > .head-box > .query-box').submit(function () {
            // 获取查询参数
            query.account = $('#app input[name="account"]').val();

            // 重新加载表格列表数据
            loadTableListData();

            // 阻止默认提交事件
            return false;
        });

        // 添加按钮点击事件
        $('#app > .head-box > .button-box > .button.add').click(function (e) {
            e.preventDefault();
            openPopupsWindow("添加学生").load('/static/page/student/add.html');
        });

        // 查看按钮点击事件
        function lookButtonClick(e) {
            e.preventDefault();
            window.sessionStorage.setItem('lookId', $(this).data('id'));
            openPopupsWindow("查看学生").load('/static/page/student/look.html');
        }

        // 编辑按钮点击事件
        function editButtonClick(e) {
            e.preventDefault();
            window.sessionStorage.setItem('editId', $(this).data('id'));
            openPopupsWindow("编辑学生").load('/static/page/student/edit.html');
        }

        // 删除按钮点击事件
        function deleteButtonClick(e) {
            e.preventDefault();
            window.sessionStorage.setItem('deleteId', $(this).data('id'));
            openPopupsWindow("删除学生").load('/static/page/student/delete.html');
        }

        // 最前页
        $('#app > .bottom-box > .button.first').click(function (e) {
            e.preventDefault();
            page.page = 1;
            loadTableListData();
        });

        // 前一页
        $('#app > .bottom-box > .button.back').click(function (e) {
            e.preventDefault();
            if (page.page > 1)
                page.page--;
            loadTableListData();
        });

        // 后一页
        $('#app > .bottom-box > .button.next').click(function (e) {
            e.preventDefault();
            if (page.page < Math.ceil(page.count / page.limit))
                page.page++;
            loadTableListData();
        });

        // 最后页
        $('#app > .bottom-box > .button.last').click(function (e) {
            e.preventDefault();
            page.page = Math.ceil(page.count / page.limit);
            loadTableListData();
        });
    });
</script>
</body>
</html>
